<template>
	<card title="小米有品众筹"
		title-style="font-size: 16upx!important;"
		right-region-style="color: #555!important; align-items: center;"
	>
		<template v-slot:right-region><view @tap="moreInfo">2款众筹中<text class="iconfont icon-arrow-right"></text></view></template>
		<gc-horizontal-left-right>
			<template v-slot:left-region>
				<view class="d-flex flex-column" style="background-color: #FFFBF0; width: 322upx; border-radius: 10upx; padding: 0upx; overflow: hidden;"
					@tap="tapEvent($event, 'left-region')"
				>
					<view class="d-flex flex-row pt-2 px-2" style="height: 225upx;">
						<view class="flex-1">
							<view style="word-break: break-all; color: #111; width: 120upx;">
								{{ resdata[0].title }}
							</view>
							<view style="font-size: 32upx; color: #CC8543; line-height: 3;">￥{{ resdata[0].price }}</view>
						</view>
						<view class="flex-1 d-flex j-center a-center">
							<image :src="resdata[0].url" style="width: 114upx; height: 128upx;"></image>
						</view>
					</view>
					<view class="px-2" style="height: 45upx; font-size: 22upx;">
						<text class="text-danger">{{ resdata[0].joinCount }}</text>人支持 完成 <text class="text-danger">{{ resdata[0].percent }}%</text>
					</view>
					<view style="height: 8upx; background: #ECC288;"></view>
				</view>
			</template>
			<template v-slot:right-region>
				<view class="d-flex flex-column" style="background-color: #FFFBF0; width: 322upx; border-radius: 10upx; padding: 0upx; overflow: hidden;"
					@tap="tapEvent($event, 'right-region')"
				>
					<view class="d-flex flex-row pt-2 px-2" style="height: 225upx;">
						<view class="flex-1">
							<view style="word-break: break-all; color: #111; width: 120upx;">
								{{ resdata[1].title }}
							</view>
							<view style="font-size: 32upx; color: #CC8543; line-height: 3;">￥{{ resdata[1].price }}</view>
						</view>
						<view class="flex-1 d-flex j-center a-center">
							<image :src="resdata[1].url" style="width: 114upx; height: 128upx;"></image>
						</view>
					</view>
					<view class="px-2" style="height: 45upx; font-size: 22upx;">
						<text class="text-danger">{{ resdata[1].joinCount }}</text>人支持 完成 <text class="text-danger">{{ resdata[1].percent }}%</text>
					</view>
					<view style="height: 8upx; background: #ECC288;"></view>
				</view>
			</template>
		</gc-horizontal-left-right>
	</card>
</template>

<script>
	import card from '@/components/common/card/index.vue'
	import gcHorizontalLeftRight  from '@/components/common/goods-container/gc-horizontal-left-right/index.vue'
	
	export default {
		components: { card, gcHorizontalLeftRight },
		data() {
			return {
				resdata: [
					{
						title: '零蓝光音乐气氛灯',
						url: 'https://img.youpin.mi-img.com/shopmain/c7b181fb1d387cead7f95b07ff35b971.png@base@tag=imgScale&h=150&w=150',
						price: '249',
						percent: '48',
						joinCount: 1957
					}, {
						title: '睡眠治疗仪',
						url: 'https://img.youpin.mi-img.com/shopmain/a74a4ad052947f01d0f3471b2ac39b35.png@base@tag=imgScale&h=150&w=150',
						price: '499',
						percent: '100',
						joinCount: '1万'
					}
				]
			}
		},
		methods: {
			tapEvent(e, type) {
				console.log('event from zhonchou', type)
				this.$emit('tap-event', e, type)
			},
			moreInfo() {
				console.log('more info')
			}
		}
	}
</script>

<style>
</style>
